<template>
    <van-popup v-model:show="showPopup" position="bottom" closeable @close="emit('closed')"
        class="bg-fog-10 rounded-t-16px pl-15px pr-15px" :style="{ height: '60%' }">
        <div class="text-16px white text-center w='[100%]' lh-50px ">Recent Draws</div>
        <div class="flex justify-between pb-20px title-box">
            <div>period</div>
            <div>number</div>
        </div>
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <div class="item" v-for=" in [1, 2, 3]">
                <div class="flex justify-between mt-10px text-14px">
                    <div class="flex items-center">
                        <div class="white">11:05</div>
                        <div class="circle w-5px h-5px ml-16px mr-20px"></div>
                        <div class="white">No.0576</div>
                    </div>
                    <div>Small | Even | 10</div>
                </div>
                <div class="h-52px relative">
                    <div class="line w-2px h-76px ml-51.5px absolute bottom--18px"></div>
                    <div class="flex mt-10px mb-10px absolute right-0 top-0">
                        <img class="w-20px h-20px mt-6px mb-6px" src="@/assets/sic-bo/animal1.png" alt="" />
                        <img class="w-20px h-20px mt-6px mb-6px" src="@/assets/sic-bo/animal2.png" alt="" />
                        <img class="w-20px h-20px mt-6px mb-6px" src="@/assets/sic-bo/animal3.png" alt="" />
                    </div>
                </div>
            </div>
        </van-pull-refresh>
    </van-popup>
</template>
  
<script setup lang="ts">

const emit = defineEmits(['closed'])
const props = defineProps<{
    show: boolean
}>()

let showPopup = ref<boolean>(false);
const loading = ref(false);

const onRefresh = () => {
    setTimeout(() => {
        loading.value = false;
    }, 1000);
};

watch(props, (newProps) => {
    showPopup.value = newProps.show;
});
</script>
  
<style lang="less" scoped>
.line {
    background: #98d0ff;
}

.title-box {
    border-bottom: 2px solid #40424b;
}

.white {
    color: #fff;
}

.red {
    color: red;
}

.des-list {
    width: 100%;
    height: 87%;
}

.circle {
    border: 2px solid #98d0ff;
    border-radius: 50%;
}
</style>
  